<template>
  <div>
    <el-card>
      <el-form>
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="线路编号：" label-width="120px">
              <el-input v-model="page.number" placeholder="请输入快递员账户"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路名称：" label-width="120px">
              <el-input v-model="page.name" placeholder="请输入快递员姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始机构：" label-width="120px">
              <TreeSelect
                v-model="page.startOrganId"
                :normalizer="normalizer"
                :options="treeData"
                placeholder="请选择起始地机构"
                :appendToBody="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="目的地机构：" label-width="120px">
              <TreeSelect
                v-model="page.endOrganId"
                :normalizer="normalizer"
                :options="treeData"
                placeholder="请选择起始地机构"
                :appendToBody="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
       <el-row>
        <el-col :span="8">
          <el-button type="primary" >新增</el-button>
          <el-button type="primary" >新增</el-button>
        </el-col>
       <el-row>
         <el-table
           @expand-change="clickTable"
           :data="tableData"
           style="width: 100%"
           border
           stripe
           highlight-current-row>
           <el-table-column type="expand"  width="55">
             <template #default>
               <el-table v-if="as" :data="temdata">
                 <el-table-column label="车次名称" prop="name" label-width="150px" />
                 <el-table-column label="发车频次">
                   <template #default="{row}">
                     {{`${Math.floor(row.departureTime / 60)}:${row.departureTime % 60<10 ? '0'+row.departureTime % 60 : row.departureTime % 60}/${row.periodName}`}}
                   </template>
                 </el-table-column>
                 <el-table-column label="到达时间" prop="arriveTime" label-width="150px">
                   <template #default="{row}">
                     <span>{{row.arriveTime|formatTime}}</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="车辆安排" prop="truckDrivers[0].truck.licensePlate" label-width="150px"/>
                 <el-table-column label="司机安排" prop="truckDrivers[0].driver.name" label-width="150px"/>
                 <el-table-column label="操作" label-width="300px">
                   <template #default="{row}">
                     <el-button type="text" size="mini" @click="edit1(row.id)">编辑车次</el-button>
                     <el-button type="text" size="mini">删除车次</el-button>
                     <el-button type="text" size="mini">安排车辆</el-button>
                     <el-button type="text" size="mini">车辆解绑</el-button>
                   </template>
                 </el-table-column>
               </el-table>
               <el-empty v-if="as" image="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png"></el-empty>
             </template>
           </el-table-column>
           <el-table-column label="路线编号" prop="number"/>
           <el-table-column label="线路名称" prop="name" />
           <el-table-column label="线路类型" prop="type">
             <template #default="{row}">
               <span v-if="row.type === 1">干线</span>
               <span v-else-if="row.type === 2">支线</span>
             </template>
           </el-table-column>
           <el-table-column label="起始地机构" prop="startOrganName" />
           <el-table-column label="目的地机构" prop="endOrganName"/>
           <el-table-column label="距离" prop="distance" />
           <el-table-column label="成本" prop="cost"/>
           <el-table-column label="预计时间（分钟）" prop="time"/>
           <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" size="small" @click="edit(row.id)">修改</el-button>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">增加车次</el-button>
              </template>
           </el-table-column>
         </el-table>
       </el-row>
       </el-row>
    </el-card>
<!--    修改按钮的dialog-->
    <el-dialog
      title="编辑线路"
      :visible="dialogVisible"
      width="40%"
      @close="dialogshow">

      <el-form :model="page1" :rules="rules" ref="page1">
        <el-form-item label="线路编号：" label-width="120px" prop="number">
          <el-input placeholder="请输入" v-model="page1.number" style="width: 350px"/>
        </el-form-item>
        <el-form-item label="线路名称：" label-width="120px" prop="name">
          <el-input placeholder="请输入" v-model="page1.name" style="width: 350px"/>
        </el-form-item>
        <el-form-item label="线路类型：" label-width="120px" prop="type">
          <el-select placeholder="请选择" v-model="page1.type" style="width: 350px">
            <el-option label="干线" value="1"/>
            <el-option label="支线" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="起始地机构：" label-width="120px" prop="startOrganName">
          <TreeSelect
            disabled
            v-model="page1.startOrganName"
            :normalizer="normalizer"
            :options="treeData"
            placeholder="请选择起始地机构"
            :appendToBody="true"
          />
        </el-form-item>
        <el-form-item label="目的地机构：" label-width="120px" prop="endOrganName">
          <TreeSelect
            disabled
            v-model="page1.endOrganName"
            :normalizer="normalizer"
            :options="treeData"
            placeholder="请选择起始地机构"
            :appendToBody="true"
          />
        </el-form-item>
        <el-form-item label="距离：" label-width="120px" prop="distance">
          <el-input placeholder="请输入" v-model="page1.distance" style="width: 350px"/>
        </el-form-item>
        <el-form-item label="成本：" label-width="120px" prop="cost">
          <el-input placeholder="请输入" v-model="page1.cost" style="width: 350px"/>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="chan" >确认</el-button>
          <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        </el-row>

      </el-form>
    </el-dialog>
<!--    编辑车次的dialog-->
    <el-dialog
      title="编辑线路"
      :visible="dialogVisible1"
      width="40%"
      @close="dialogshow1">
      <el-form :model="formList">
        <el-form-item label="线路名称" label-width="120px">
          <el-input placeholder="请输入" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="车次名称" label-width="120px">
          <el-input placeholder="请输入" v-model="formList.name" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="发车时间" label-width="120px">
          <el-time-picker
            v-model="value1"
            format='HH:mm'     设置下拉框时间格式
            value-format="HH:mm"    设置返回值时间格式
            :picker-options="{校验开始时间不得大于结束时间或最大时间值selectableRange:`00:00:00 -{ 23:59:00'}`
    }">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="持续时间" label-width="120px">
          <el-input placeholder="请输入" v-model="formList.estimatedTime" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="发车周期" label-width="120px">
          <el-select v-model="formList.periodName">
            <el-option label="天" value="天"/>
            <el-option label="周" value="周"/>
            <el-option label="月" value="月"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { GetListApi } from '@/api/instiution'
import { getLineaDetailApi, getLineDetailApi, getLineListApi, getLinePageApi } from '@/api/line'

export default {
  components: { TreeSelect },
  name: 'LineManage',
  data () {
    return {
      page: {
        number: '',
        name: '',
        startOrganId: null,
        endOrganId: null,
        page: 1,
        pageSize: 10
      },
      value1: '',
      total: 0,
      startTime: '',
      treeData: [],
      tableData: [],
      id: '',
      temdata: [],
      dialogVisible: false,
      dialogVisible1: false,
      diadata: {},
      page1: {
        number: '',
        name: '',
        type: '',
        startOrganName: null,
        endOrganName: null,
        distance: '',
        cost: ''
      },
      formList: {
        arriveTime: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入线路编号', trigger: 'blur' },
          { max: 8, message: '线路编号前两位为XL，后6位位数字，请重新输入', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入线路名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择线路类型', trigger: 'blur' }
        ],
        startOrganName: [
          { required: true, message: '请选择起始地机构', trigger: 'blur' }
        ],
        endOrganName: [
          { required: true, message: '请选择目的地机构', trigger: 'blur' }
        ],
        distance: [
          { required: true, message: '请输入距离', trigger: 'blur' }
        ],
        cost: [
          { required: true, message: '请输入成本', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    as () {
      if (this.temdata.length !== '0') {
        return true
      } else {
        return false
      }
    }
    // as1 () {
    //
    // }
  },
  created () {
    this.getTreeData()
    this.getLinePage()
  },
  methods: {
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取机构树
    async getTreeData () {
      const res = await GetListApi()
      this.treeData = JSON.parse(res.data)
      // console.log(this.treeData)
    },
    // 搜索
    search () {

    },
    // 重置
    reset () {

    },
    // 获取线路分页数据
    async getLinePage () {
      const res = await getLinePageApi(this.page)
      // console.log(res)
      this.total = +res.data.counts
      this.tableData = res.data.items
      console.log(this.tableData)
    },
    async clickTable (row) {
      console.log(row)
      console.log(row.id)
      this.id = +row.id
      const res = await getLineListApi(
        {
          transportLineId: row.id
        })
      // console.log(res)
      this.temdata = res.data
      console.log(this.temdata)
    },
    dialogshow () {
      this.dialogVisible = false
    },
    dialogshow1 () {
      this.dialogVisible1 = false
    },
    async edit (id) {
      this.dialogVisible = true
      const res = await getLineaDetailApi(id, { id: id })
      console.log(res)
      this.page1 = res.data
      console.log(this.page1)
    },
    async chan () {
    // 表单校验
    //   await this.$refs.page1.validate('修改成功')
      this.$refs.page1.validate(async (valid) => {
        console.log(valid)
        if (valid) {
          // const res = await getLineaDetailApi(this.id, this.page1)
          // console.log(res)
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    // 点击出现对应下拉框
    async  edit1 (id) {
      this.dialogVisible1 = true
      const res = await getLineDetailApi(id, {
        id: id
      })
      console.log(res)
      this.formList = res.data
      console.log(this.formList)
    },
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      console.log(this.page.pagesize)
    },
    // 监听pagename改变
    async handleCurrentChange (newNum) {
      this.page.page = newNum
      console.log(this.page.page)
      // await this.getAgentList(this.page)
      // await this.getLinePageApi(this.page)
      const res = await getLinePageApi(this.page)
      this.tableData = res.data.items
    }
  }
}
</script>
